<template>
	<div>
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>{{$store.state.company.companyName}}</el-breadcrumb-item>
				<el-breadcrumb-item>数字果园</el-breadcrumb-item>
				<el-breadcrumb-item>数字装备</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="tableNavBox">
			<div class="tableBoxTable" style="margin-bottom: 50px;">
				<tableForm :title="'数字装备'" :pageData="pageData" :data="data" :addGo="'/digitalOrchard/working/equipAdd'">
					<template slot="service" slot-scope="scope">
						<div :title="scope.row.row.serviceName">
							<span v-for="(item, index) in scope.row.row.serviceName" v-show="index<3" style="margin-right: 5px;">{{ item }}</span>
						</div>
					</template>
					<!-- <template slot="equipmentName" slot-scope="scope">
						<div :title="scope.row.row.equipmentName">
							<span v-for="(item, index) in scope.row.row.equipmentName" v-show="index<4" style="margin-right: 5px;">{{ item }}</span>
						</div>
					</template> -->
					<template slot="state" slot-scope="scope">
						{{ states(scope.row.row.state) }}
					</template>
					<template slot="operation" slot-scope="scope">
						<div class="btnBox" >
							<span style="color:#909399;">查看</span>
							<span style="color:#67C23A;" v-if="scope.row.row.state == 1">接受</span>
							<span style="color:#E6A23C;" v-if="scope.row.row.state == 1">拒绝</span>
							<span style="color:#67C23A;" v-if="scope.row.row.state == 3">采纳</span>
							<span style="color:#E6A23C;" v-if="scope.row.row.state == 3">不采纳</span>
							<span style="color:#F56C6C;">删除</span>
						</div>
					</template>
				</tableForm>
				<pagina-tion :totalNum="pageData.totalNum" @paginaClick="paginaClick"></pagina-tion>
			</div>
			
		</div>
	</div>
</template>

<script>
	import tableForm from '@/components/tableForm.vue'
	export default {
		components: {
			tableForm
		},
		data() {
			return {
				companyId: '',
				companyName: this.$store.state.company.companyName,
				userId: '',
				pageData: {
					items:[
						// {createDate:'08.16', baseName:'测试基地', equipmentName:'数字基地', supplierName:'121', service:'三维建模', state:'0'},
						// {createDate:'08.16', baseName:'测试基地', equipmentName:'数字基地', supplierName:'121', service:'三维建模', state:'1'},
						// {createDate:'08.16', baseName:'测试基地', equipmentName:'数字基地', supplierName:'121', service:'三维建模', state:'3'},
					]
				},
                data:[
                    {type:'text',prop:'createDate',label:'时间'},
                    {type:'text',prop:'baseName',label:'基地名称'},
                    {type:'text',prop:'equipmentName',label:'装备名称'},
                    {type:'text',prop:'supplierName',label:'供应商'},
                    {type:'text',prop:'service', label: '功能简介'},
                    {type:'slot',prop:'state',label:'进展' },
                    {type:'slot',prop:'operation',label:'操作',width:'150px'},
                ],
				pageNum: 1
			}
		},
		computed:{
			states(){
				return (state) => {
					if(state == 0){
						return '供应商邀请'
					} else if(state == 1){
						return '邀请供应商'
					} else if(state == 2){
						return '设计中'
					} else if(state == 3){
						return '设计完成'
					}
				}
			}
		},
		created() {
			this.$store.commit('digitalOrchard_leftNavIndex', 12)
		},
		mounted() {
			// this.$store.commit('set_teamNavIndex', 212)
			let store = this.$store.state.user
			this.userId = store.userInfo.id
			
			this.companyId = this.$store.state.company.selectCompanyId ?
				this.$store.state.company.selectCompanyId : this.$store.state.company.companyId
			
			// this.getPageData()
		},
		watch: {


		},
		methods: {
			getPageData(){
				// 获取装备列表
				if(this.$store.state.company.companyId){
					this.$request.postForm('/api/orchard/digitalEquipment/queryDigitalList', {
						pageSize: $globalData.pageSize,
						page: this.pageNum,
						companyId: this.companyId
					}).then(res=>{
						if(res.code == 200){
							this.pageData = res.data
							console.log(res.data)
						}
					})
				}
			},
			paginaClick(val){
				this.pageNum = val
				this.getPageData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btnBox{
		span{
			cursor: pointer;
			margin-right: 5px;
		}
	}
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.tableNavBox {
		padding-top: 0;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		margin-top: 20px;
	}

	.dialogVisible>>>.el-input__inner {
		width: 270px;
	}
</style>
